<template>
  <a-spin :spinning="loading">
    <div class="typeBar">
      <template v-for="(typeItem,index2) in ContentTypeEnum" :key="index2">
        <a-button :type="buttonClass(typeItem)" @click="changeType(typeItem.type)">{{ typeItem.name
          }}
        </a-button>
      </template>
    </div>

    <div style="min-height: 500px">
      <div v-for="(mapItem,key) in items" :key="key" class="searchType" v-if="!!items">
        <div class="cnName">{{ castToCnName(key) }}</div>
        <a-card>
          <div class="item" v-for="(searchItem,index1) in mapItem" :key="index1">
            <a @click="detailSearch(searchItem)">
              <span class="title" v-html="searchItem.title"></span>
            </a>
            <a-divider v-if="index1 < mapItem.length-1" />
          </div>
        </a-card>
      </div>
      <EmptyData v-else />
    </div>
  </a-spin>
</template>
<script lang="ts" setup>
import { ContentTypeEnum } from "@/utils/constant";
import router from "@/router";
import EmptyData from "@/components/public/EmptyData.vue";
import { ref } from "vue";

const emit = defineEmits(["changeSearchType"]);
const currentHref = ref<any>();
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  items: {
    type: Object,
    default: null
  }
});

function castToCnName(searchType) {
  return ContentTypeEnum.filter((item: any) => item.type == searchType)[0]?.name;
}

function detailSearch(searchItem) {
  let url;
  if (searchItem.searchType == 1) {
    url = router.resolve({
      path: `/course/onlineStudy/${searchItem.id}`
    });
  } else if (searchItem.searchType == 2) {
    url = router.resolve({
      path: `/exam/preview/${searchItem.id}`
    });
  } else if (searchItem.searchType == 3) {
    url = router.resolve({
      path: `/practice/practiceMode/${searchItem.id}`
    });
  } else if (searchItem.searchType == 4) {
    url = router.resolve({
      path: `/news/detail/${searchItem.id}`
    });
  }
  window.open(url.href, "_blank");
}

function changeType(type) {
  currentHref.value = type;
  emit("changeSearchType", type);
}

function buttonClass(item) {
  if (item.type == currentHref.value) {
    return "primary";
  }
  return "";
}
</script>
<style lang="less" scoped>
:deep(.ant-divider-horizontal) {
  margin: 14px 0;
}

.searchType {
  margin: 25px 0;
}

.cnName {
  color: #42b983;
  font-size: 15px;
  padding: 15px 4px;
}

a {
  color: black;
}

a:hover {
  color: #3370ff;
}

.typeBar {
  margin: 20px auto;
  display: flex;
  justify-content: space-evenly;
}

</style>
